<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户回单下载</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .custom-input-width {
            width: 200px;
        }
        .input-container {
            display: flex;
        }

        .input-container input {
            flex: 1;
            margin-right: 0px;
        }
        .required {
            color: red;
            margin-left: 5px; /* Add some space between the label text and the asterisk */
        }


    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="form-initPlat" id="userForm" method="post"
          style="margin-bottom: 80px">
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">交易单号<span class="required">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="insId" required lay-verify="required" placeholder="请输入交易单号"
                           autocomplete="off" class="layui-input custom-input-width">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">账号<span class="required">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="acNo" required lay-verify="required" placeholder="请输入待查账号"
                           autocomplete="off" class="layui-input custom-input-width">
                </div>
            </div>
        </div>
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">操作标识<span class="required">*</span></label>
                <div class="layui-input-block">
                    <input type="radio" name="operFlag" value="0" title="T日回单" checked>
                    <input type="radio" name="operFlag" value="1" title="T-n日回单" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">可信签章</label>
                <div class="layui-input-block">
                    <input type="radio" name="needSign" value="0" title="不添加" checked>
                    <input type="radio" name="needSign" value="1" title="添加" >
                </div>
            </div>
        </div>
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">回单编号<span class="required">*</span></label>
                <div class="layui-input-block">
                    <textarea  required lay-verify="required" name="innerNos" placeholder="请输入回单编号，最多可输入三3个回单编号，每个编号用‘|’线隔开，一个回单编号对应一个文件名称。" cols="26"  rows="1" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">文件名称<span class="required">*</span></label>
                <div class="layui-input-block">
                    <textarea  required lay-verify="required" name="fileNames" placeholder="请输入文件名称，最多可输入3个文件名称，每个编号用‘|’线隔开，一个文件名称对应一个回单编号。" cols="26"  rows="1" class="layui-textarea"></textarea>

                </div>
            </div>
            <button style="margin-left: 15px" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="post-initPlat">查&emsp;询</button>

        </div>
        <div><a id="pdfLink" style="color: #01AAED" target="_blank">点击此链接下载查看</a></div>
        <div style="text-align: center">
            <object id="pdfObject" type="application/pdf" width="90%" height="600px">
            </object>
        </div>
    </form>
</div>


<script src="../../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'laydate', 'table', 'form'], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, element = layui.element, laydate = layui.laydate,
            table = layui.table;
        element.render('icon');
        // 初始化时间范围选择器
        laydate.render({
            elem: '#dateRange',
            range: true,
            format: 'yyyy/MM/dd' // 使用斜杠作为时间分隔符
        });
        let pdfURL;
        // 检查是否已经成功赋值 data 和 href 属性
        $("#pdfLink").click(function () {
            if (pdfURL) {
                // 成功赋值，允许点击，打开新页面
                window.open(pdfURL, '_blank');
            } else {
                // 没有成功赋值，阻止点击
                layer.msg("请先查询");
                return false;
            }
        });
        //上传完毕 提交表单
        form.render(null, 'form-initPlat');
        form.on('submit(post-initPlat)', function (data) {
            const filed = data.field;
            admin.req({
                url: "/platform/cmbc/getB2eElectNoteDownLoadNew",
                data: {insId: filed.insId, acNo: filed.acNo, innerNos: filed.innerNos.join(","),
                    fileNames:filed.fileNames.join(","),operFlag:filed.operFlag,needSign:filed.operFlag},
                type: 'post',
                done: function (res) {
                    const data = res.data;
                    const pdfObject = document.getElementById('pdfObject');
                    const pdfLink = document.getElementById('pdfLink');
                    // 设置 data 和 href 属性
                    pdfURL = data['FileContent'];
                    pdfObject.setAttribute('data', pdfURL);
                    pdfLink.setAttribute('href', pdfURL);
                }
            });
            return false;
        });

    });
</script>
</body>
</html>